<template>
	<!-- 酒店预定 -->
	<view class="">
		<k-navbar title="酒店预定">
			<view @click="toUrl('/pages/hotel/orderList')">
				<u-icon name="file-text" color="#ffffff" size="48" style="padding-right: 20rpx;"></u-icon>
			</view>
		</k-navbar>
		<image src="../../static/hotel/bg.png" style="width:100%;height:383rpx;" mode=""></image>
		<view class="filter-box">
			<view class="content">
				<view class="k-cell u-flex" @click="cityChoose">
					<view class="u-flex-1 u-font-28" style="font-weight: bold;">
						{{searchData.cityName}}
					</view>
					<view class="primary">当前位置</view>
				</view>
				<view class="k-cell u-flex">
					<view class="u-flex-1" @click="showCalendar = true">
						<text class="u-font-40">{{checkInDateShow}}</text>
						<text class="span">—</text>
						<text class="u-font-40">{{checkOutDateShow}}</text>
					</view>
					<view class="">共{{dayShow}}晚</view>
				</view>
				<view class="k-cell-input">
					<u-input v-model="searchData.keyword" type="text" :border="false" placeholder="搜索酒店名/地名/关键字"/>
				</view>
				<view class="k-cell-input">
					<u-input v-model="hotelFilterShow" type="select" :border="false" placeholder="星级/价格" @click="showFilter = true"/>
				</view>
				<u-button class="btn" type="warning" shape="circle" @click="search">酒店查询</u-button>
			</view>
		</view>
		<view class="h2">附近酒店{{searchData.hotelStars}}</view>
		<hotel-item :list="tableData" @onSuccess="onSuccess"></hotel-item>
		<view style="margin-top: 30rpx;">
			<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" />
		</view>
		<u-calendar
			v-model="showCalendar"
			mode="range"
			:active-bg-color="$u.color.warning"
			:range-bg-color="$u.color.warning"
			range-color="#FFFFFF"
			start-text="入店"
			end-text="离店"
			btn-type="warning"
			:min-date="minDate"
			:max-date = "maxDate"
			@change="confirmCalendar"></u-calendar>
		<u-popup v-model="showFilter" mode="bottom" border-radius="14">
			<star-and-price-filter :minPrice="searchData.minPrice" :hotelStars="searchData.hotelStars" @filterSuccess="filterSuccess"></star-and-price-filter>
		</u-popup>
	</view>
</template>

<script>
	import kNavbar from '@/components/navbar/index'
	import hotelItem from './common/hotelItem.vue'
	import starAndPriceFilter from './common/starAndPriceFilter.vue'
	export default {
		components: {
			kNavbar,
			hotelItem,
			starAndPriceFilter
		},
		data() {
			return {
				value: '',
				city: '',
				showCalendar: false,
				showFilter: false,
				checkInDateShow: '',
				checkOutDateShow: '',
				dayShow: 1,
				hotelFilterShow: '',
				searchData: {
					latitude: '',
					longitude: '',
					cityName: '',
					checkInDate: '',
					checkOutDate: '',
					hotelStars: '',
					maxPrice: '',
					minPrice: '',
					keyword: '',
					page: 1,
					size: 10
				},
				total: 0,
				tableData: [],
				iconType: 'flower',
				status: 'loadmore',
				loadText: {
					loadmore: '加载更多',
					loading: '努力加载中',
					nomore: '没有更多了'
				},
				minDate: '',
				maxDate: '',
			}
		},
		onShow() {
			let nowDate = new Date()
			// 初始化默认日期
			this.searchData.checkInDate = this.$u.timeFormat(nowDate, 'yyyy-mm-dd')
			this.searchData.checkOutDate = this.$u.timeFormat(nowDate.getTime() + 60 * 60 * 24 * 1000, 'yyyy-mm-dd')
			// 初始化默认展示日期格式
			this.checkInDateShow = `${new Date(this.searchData.checkInDate).getMonth() + 1}月-${new Date(this.searchData.checkInDate).getDate()}日`
			this.checkOutDateShow = `${new Date(this.searchData.checkOutDate).getMonth() + 1}月-${new Date(this.searchData.checkOutDate).getDate()}日`
			// 可选择范围 	当日 到90天内
			this.minDate = this.$u.timeFormat(nowDate)
			this.maxDate = this.$u.timeFormat(nowDate.getTime() + 60 * 60 * 24 * 1000 * 90, 'yyyy-mm-dd')
			// 获取地理位置
			let city = uni.getStorageSync('city');
			if (city) {
				this.searchData.cityName = city;
			} else {
				var _this = this;
				let amap_key = "914e53e8abb36cddf40df408b4e41912"
				uni.getLocation({
					type:'gcj02',
					success(pos) {
						uni.request({
							url: 'https://restapi.amap.com/v3/geocode/regeo',
							data: {
								location: `${pos.longitude},${pos.latitude}`,
								key: amap_key,
								poitype: '城市',
							},
							success(res) {
								uni.setStorageSync('lat', pos.latitude);
								uni.setStorageSync('lng', pos.longitude);
								uni.setStorageSync('city', res.data.regeocode.addressComponent.city);
								this.searchData.cityName = res.data.regeocode.addressComponent.city;
							}
						});
					}
				});
			}
		},
		mounted() {
			// 获取地理位置
			let city = uni.getStorageSync('city');
			if (city) {
				this.searchData.cityName = city;
				this.getList()
			} else {
				var _this = this;
				let amap_key = "914e53e8abb36cddf40df408b4e41912"
				uni.getLocation({
					type:'gcj02',
					success(pos) {
						uni.request({
							url: 'https://restapi.amap.com/v3/geocode/regeo',
							data: {
								location: `${pos.longitude},${pos.latitude}`,
								key: amap_key,
								poitype: '城市',
							},
							success(res) {
								uni.setStorageSync('lat', pos.latitude);
								uni.setStorageSync('lng', pos.longitude);
								uni.setStorageSync('city', res.data.regeocode.addressComponent.city);
								this.searchData.cityName = res.data.regeocode.addressComponent.city;
								_this.getList()
							}
						});
					}
				});
			}
			
		},
		methods: {
			cityChoose() {
				uni.navigateTo({
					url: '/pages/moive/city'
				})
			},
			confirmCalendar(e) {
				this.checkInDateShow = `${e.startMonth}月-${e.startDay}日`
				this.checkOutDateShow = `${e.endMonth}月-${e.endDay}日`
				this.searchData.checkInDate = e.startDate;
				this.searchData.checkOutDate = e.endDate;
				this.dayShow = (new Date(this.searchData.checkOutDate).getTime() - new Date(this.searchData.checkInDate).getTime())/(60 * 60 * 24 * 1000)
			},
			onSuccess(e) {
				let params = {
					checkInDate: this.searchData.checkInDate,
					checkOutDate: this.searchData.checkOutDate,
					hotelId: e.hotelId
				}
				let date = {
					day: this.dayShow,
					checkInDateShow: this.checkInDateShow,
					checkOutDateShow: this.checkOutDateShow
				}
				uni.navigateTo({
					url:'/pages/hotel/hotelDetail?params=' + JSON.stringify(params)+'&date='+ JSON.stringify(date)
				})
			},
			toUrl(url) {
				let token = uni.getStorageSync('token');
				if(token){
					uni.navigateTo({
						url
					})
				}else{
					uni.navigateTo({
						url:'/pages/login/index'
					})
				}
				
			},
			onReachBottom() {
				if(this.tableData.length >= this.total) return ;
				this.status = 'loading';
				this.searchData.page = ++ this.searchData.page;
				setTimeout(() => {
					this.getList()
					if(this.tableData.length >= this.total) this.status = 'nomore';
					else this.status = 'loading';
				}, 2000)
			},
			getList() {
				this.$u.api.hotelList(this.searchData).then(res => {
					if(res.code == 0) {
						if (res.data.length > 0) {
							this.tableData = [...this.tableData, ...res.data];
						} else {
							// 分页结束
							this.status = 'nomore';
						}
						if (this.tableData.length  >= this.total) {
							this.status = 'nomore';
						}
						this.total = res.extraInfo;
					} else {
						uni.showToast({
							icon:'none',
							title: res.msg
						});
					}
				})
			},
			filterSuccess(e) {
				if (e.price) {
					this.searchData.maxPrice = e.price.max;
					this.searchData.minPrice = e.price.min;
				}
				if (e.stars) {
					// 酒店档次整合
					this.searchData.hotelStars = e.stars.val.length > 0 ? e.stars.val.toString() : ''
				}
				this.hotelFilterShow = `${e.stars ? (e.stars.arr.length ? e.stars.arr.toString() : '' ) : ''}  ${e.price ? e.price.label : ''}`
				this.showFilter = false;
			},
			search() {
				// this.tableData = [];
				// this.searchData.page = 1;
				// this.total = 0;
				// this.status = 'loadmore';
				// this.getList()
				let date = {
					day: this.dayShow,
					checkInDateShow: this.checkInDateShow,
					checkOutDateShow: this.checkOutDateShow
				}
				uni.navigateTo({
					url:'/pages/hotel/hotelSearch?params=' + JSON.stringify(this.searchData)+'&date='+ JSON.stringify(date)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.primary {
		color: $u-type-warning;
	}
	.filter-box {
		padding: 0 30rpx;
		.content {
			padding: 0 30rpx 50rpx 30rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 5rpx 24rpx 0rpx rgba(6, 0, 1, 0.1);
			border-radius: 0rpx 0rpx 12rpx 12rpx;
		}
		.k-cell-input {
			padding: 20rpx 0;
			border-bottom: 1px solid #F5F5F5;
		}
		.k-cell {
			padding: 28rpx 0;
			border-bottom: 1px solid #F5F5F5;
		}
		.span {
			padding: 0 20rpx;
		}
		.btn {
			margin-top: 50rpx;
		}
		
	}
	.h2 {
		padding: 30rpx 30rpx 15rpx 30rpx;
		font-size: 36rpx;
		font-weight: bold;
	}
	// .warp {
	// 	padding: 20rpx;
	// 	.title {
	// 		margin-top: 30rpx;
	// 		font-size: 30rpx;
	// 	}
	// 	.item {
	// 		border: 1rpx solid #969696;
	// 		border-radius: 6rpx;
	// 		text-align: center;
	// 		line-height: 60rpx;
	// 		margin-top: 20rpx;
	// 	}
	// 	.active {
	// 		border: 1rpx solid $u-type-warning;
	// 		color: $u-type-warning;
	// 	}
	// }
</style>
